<script setup>
// 图标按钮
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { getTalkList, concealTalk, delComment, sendTalk, updateTalkApi, delTalkApi } from '@/api/talk'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserStore } from '@/stores/user'
// 实例化仓库
const userStore = useUserStore()
// 默认选中的标签页
const activeName = ref('0')

const talkList = ref([])
// 获取到所有的说说
const getTalkListData = async (status) => {
  const res = await getTalkList(status)
  talkList.value = res.data
  console.log(talkList.value);
}
onMounted(() => {
  getTalkListData(0)
})

// 点击了tab页切换
const handleClick = (item) => {
  getTalkListData(parseInt(item.props.name, 10))
}

// 说说的抽屉弹层
const isTalkDrawer = ref(false)
// 当前说说详情
const currentTalk = ref({})
// 获取说说的详情 
const details = (id) => {
  currentTalk.value = talkList.value.filter(item => item.talk.id === id)[0]
  // 打开弹层
  isTalkDrawer.value = true
}

// 显示照片的参数
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
// 删除图片方法
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
// 显示图片
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

// 删除评论
const delCommentData = async (id, talkId) => {
  await delComment(id, talkId)
  ElMessage.success('删除成功')
  await getTalkListData(0)
  // 驱动视图
  details(talkId)
}

// 发送说说的参数
const formTalk = ref({
  content: '',
  fileList: [],
  status: 0
})
// 说说图片参数
const fileList = ref([])
// token
const headers = ref({ 'Authorization': userStore.userInfo.token })
// 上传成功后的响应
const handleSuccess = async (response) => {
  console.log(response);
  console.log(formTalk.value.fileList);
  formTalk.value.fileList.push({
    url: response.data
  })
}
// 发送说说的弹层
const isTalkDialog = ref(false)
// 发送说说和修改的弹层
const handleOk = async () => {
  let message = '修改'
  if (currentId.value) {
    activeName.value = '0'
    // 修改
    await updateTalkApi(currentId.value, formTalk.value)
  } else {
    message = '发布'
    // 发布
    await sendTalk(formTalk.value)
  }
  ElMessage.success(message + '成功')
  onClose()
  isTalkDialog.value = false
  getTalkListData(0)
}
// 关闭弹层
const onClose = () => {
  isTalkDialog.value = false
  formTalk.value = {
    content: '',
    fileList: [],
    status: 0
  }
  currentTalk.value = {}
  currentId.value = null
}

// 隐藏
const conceal = (id, status) => {
  let message = '隐藏'
  if (status == 0) {
    message = '显示'
  }
  ElMessageBox.confirm(`您确定要${message}该说说吗？`, `${message}说说`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(async () => {
    await concealTalk(id, status)
    ElMessage.success(message + '成功')
    getTalkListData(status)
    activeName.value = status + ''
  })
}

// 当前id
const currentId = ref(null)
// 修改
const updateTalk = (id, status) => {
  currentId.value = id
  isTalkDialog.value = true
  const talk = talkList.value.filter(item => item.talk.id === id)[0]
  const urlList = talk.urlList.map(url => ({
    url
  }))
  formTalk.value.content = talk.talk.content
  fileList.value = urlList
  formTalk.value.fileList = urlList
  formTalk.value.status = status
}

// 删除
const del = (id) => {
  ElMessageBox.confirm(`您确定要删除该说说吗？`, `删除说说`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(async () => {
    await delTalkApi(id)
    ElMessage.success('删除成功')
    getTalkListData(0)
  })
}
</script>
<template>
  <div class="div">
    <!-- 卡片位置 -->
    <el-card class="label">
      <!-- 按钮的插槽 -->
      <template #header>
        <div class="card">
          <!-- 标题 -->
          <div class="card-header">
            <span style="color: #131f2b;font-weight: bold;">说说管理</span>
          </div>
          <!-- 按钮区域 -->
          <div class="card-rignt">
            <!-- 上传的按钮 -->
            <el-button type="primary" plain style="width: 100px;margin-left: 1100px;" @click="isTalkDialog = true">
              <i class="iconfont icon-xinzeng" style="font-size: 14px;"></i>
              <span style="margin-right: 28px;">发布说说</span>
            </el-button>
          </div>
        </div>
      </template>
      <!-- 说说的展示区域 -->
      <!-- 这里是标签页为小卡片的状态 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 标签页的选线 -->
        <el-tab-pane label="全部" name="0">
          <!-- 滚动条 -->
          <el-scrollbar height="460px">
            <!-- 卡片的盒子 -->
            <div class="card-box">
              <!-- 存放每一个说说的盒子 -->
              <div class="box">
                <el-card class="card-min" v-for="item in  talkList " :key="item">
                  <!-- 头部是一个下拉框箭头 -->
                  <template #header>
                    <div class="text-drodown" style="display: flex;justify-content: center;">
                      <div class="text">
                        <!-- 左侧显示日期 -->
                        <p style="font-size: 11px;width: 160px;">{{ item.talk.createTime }}
                        </p>
                      </div>
                      <div class="dropdown-box" style="margin-bottom: 100px;width: 100px;margin-left: 92px;">
                        <!-- 下拉菜单需要靠右显示 -->
                        <el-dropdown class="dropdown">
                          <!-- 操作按钮设置一个文本样式 -->
                          <span class="el-dropdown-link">
                            <el-icon class="el-icon--right">
                              <arrow-down />
                            </el-icon>
                          </span>
                          <!-- 下拉菜单的选线 -->
                          <template #dropdown>
                            <el-dropdown-menu v-if="userStore.userInfo.photoUrl">
                              <!-- 给每一个菜单项绑定一个操作按钮 -->
                              <el-dropdown-item @click="details(item.talk.id)">详情</el-dropdown-item>
                              <el-dropdown-item v-permissionDirective
                                @click="conceal(item.talk.id, 1)">隐藏</el-dropdown-item>
                              <el-dropdown-item v-permissionDirective
                                @click="updateTalk(item.talk.id, 0)">修改</el-dropdown-item>
                              <el-dropdown-item v-permissionDirective @click="del(item.talk.id)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                            <el-dropdown-menu v-else>
                              <!-- 给每一个菜单项绑定一个操作按钮 -->
                              <el-dropdown-item @click="details(item.talk.id)">详情</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>

                        </el-dropdown>
                      </div>
                    </div>
                  </template>
                  <!-- 中间内容区域是多张图片和省略文字 -->
                  <div class="text-box">
                    <el-text truncated>
                      {{ item.talk.content }}
                    </el-text>
                  </div>
                  <!-- 图片位置 -->
                  <div class="image-box">
                    <div class="talk" v-for="imageUrl in item.urlList" :key="imageUrl">
                      <img class="talk-url" :src="imageUrl" alt="">
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="隐藏" name="1">
          <!-- 滚动条 -->
          <el-scrollbar height="460px">
            <!-- 卡片的盒子 -->
            <div class="card-box">
              <!-- 存放每一个说说的盒子 -->
              <div class="box">
                <el-card class="card-min" v-for="item in  talkList " :key="item">
                  <!-- 头部是一个下拉框箭头 -->
                  <template #header>
                    <div class="text-drodown" style="display: flex;justify-content: center;">
                      <div class="text">
                        <!-- 左侧显示日期 -->
                        <p style="font-size: 11px;width: 160px;">{{ item.talk.createTime }}
                        </p>
                      </div>
                      <div class="dropdown-box" style="margin-bottom: 100px;width: 100px;margin-left: 92px;">
                        <!-- 下拉菜单需要靠右显示 -->
                        <el-dropdown class="dropdown">
                          <!-- 操作按钮设置一个文本样式 -->
                          <span class="el-dropdown-link">
                            <el-icon class="el-icon--right">
                              <arrow-down />
                            </el-icon>
                          </span>
                          <!-- 下拉菜单的选线 -->
                          <template #dropdown>
                            <el-dropdown-menu>
                              <!-- 给每一个菜单项绑定一个操作按钮 -->
                              <el-dropdown-item @click="details(item.talk.id)">详情</el-dropdown-item>
                              <el-dropdown-item @click="conceal(item.talk.id, 0)">显示</el-dropdown-item>
                              <el-dropdown-item @click="updateTalk(item.talk.id, 1)">修改</el-dropdown-item>
                              <el-dropdown-item @click="del(item.talk.id)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div>
                    </div>
                  </template>
                  <!-- 中间内容区域是多张图片和省略文字 -->
                  <div class="text-box">
                    <el-text truncated>
                      {{ item.talk.content }}
                    </el-text>
                  </div>
                  <!-- 图片位置 -->
                  <div class="image-box">
                    <div class="talk" v-for="imageUrl in item.urlList" :key="imageUrl">
                      <img class="talk-url" :src="imageUrl" alt="">
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 说说弹层 -->
    <el-dialog title="发布说说" width="600px" v-model="isTalkDialog" @close="onClose">
      <el-form style="height:400px;" :model="formTalk" :rules="rules" label-width="80px">
        <!-- 说说文本域 -->
        <el-form-item label="内容">
          <el-input type="textarea" :rows="2" style="width: 300px;" placeholder="请填写说说内容"
            v-model="formTalk.content"></el-input>
        </el-form-item>
        <!-- 图片墙 -->
        <el-form-item label="图片">
          <el-upload v-model:file-list="fileList" :on-success="handleSuccess" action="/prod-api/admin/talk/talkUpload"
            :headers="headers" list-type="picture-card" :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <el-icon style="margin:0 5px 3px 0;">
              <Plus />
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible" width="930px">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <!-- 状态 -->
        <el-switch style="margin-left: 40px;" v-model="formTalk.status" active-text="显示" inactive-text="隐藏"
          :active-value="0" :inactive-value="1">
        </el-switch>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="onClose">取 消</el-button>
          <el-button v-permissionDirective size="small" type="primary" @click="handleOk" :loading="confirmLoading">确
            定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 抽屉组件 -->
    <el-drawer direction="rtl" size="45%" show-close v-model="isTalkDrawer" :before-close="close">
      <!-- 头像和文字位置 -->
      <div class="tx-wz">
        <div class="box">
          <img v-if="userStore?.userInfo?.photoUrl" :src="userStore?.userInfo?.photoUrl" alt="">
          <img v-else src="../../assets/images/c1105a00eacd48dea483bb16b9efc363H.png" alt="">
        </div>
        <!-- 头像和创建时间 -->
        <div class="hp">
          <h3>豪啊</h3>
          <p>{{ currentTalk.talk.createTime }}</p>
        </div>
      </div>
      <!-- 说说内容和图片 -->
      <div class="content">
        <div class="text">
          <p style="color: #323232;">{{ currentTalk.talk.content }}</p>
        </div>
        <div class="tp">
          <el-image :preview-src-list="currentTalk.urlList" :initial-index="index" class="ig" :src="img" fit="fill"
            v-for="(img, index) in currentTalk.urlList" :key="img" />
        </div>
        <!-- 点赞和评论 -->
        <div class="dp">
          <i :class="{ 'iconfont': true, 'icon-pinglun': true, }" style="font-size: 22px;"></i>
          <span v-if="currentTalk.commentList !== null && currentTalk.commentList.length" style="margin-left: 7px;
              ">{{ currentTalk.commentList.length }}</span>
          <i :class="{ 'iconfont': true, 'icon-xihuan': true, }" @click="onLike(currentTalk.talk.id)"></i>
          <span v-if="currentTalk.talk.likeCount" style="margin-left: 5px;">{{ currentTalk.talk.likeCount }}</span>
        </div>
        <!-- 点赞列表 -->
        <div class="box-like">
          <!-- 点赞图标 -->
          <div class="is">
            <i class="iconfont icon-xihuan"> </i>
          </div>
          <!-- 点赞过的用户的头像 -->
          <div class="dzlist">
            <div class="box" v-for="item in currentTalk.talkUserList" :key="item">
              <img :src="item.url" alt="">
            </div>
          </div>
        </div>
        <!-- 评论列表 -->
        <div class="pl-box">
          <div class="pl">
            <i class="iconfont icon-pinglun"></i>
          </div>
          <!-- 默认的评论 -->
          <div class="box">
            <!-- 头像 -->
            <div class="img-box">
              <img v-if="userStore?.userInfo?.photoUrl" :src="userStore?.userInfo?.photoUrl" alt="">
              <img v-else src="../../assets/images/c1105a00eacd48dea483bb16b9efc363H.png" alt="">
            </div>
            <!-- 名称和评论语 -->
            <div class="my">
              <div class="nt">
                <span style="font-weight: bold;">豪啊</span>
                <span>2024-06-19 11:03:06</span>
              </div>
              <div class="i" style="position: relative;">
                <span style="font-weight: 600;">大家可以随意留言哦</span>
              </div>
            </div>
          </div>
          <div class="box" v-for="comment in currentTalk.commentList" :key="comment">
            <!-- 头像 -->
            <div class="img-box">
              <img :src="comment.userUrl" alt="">
            </div>
            <!-- 名称和评论语 -->
            <div class="my">
              <div class="nt">
                <span style="font-weight: bold;">{{ comment.name }}</span>
                <span>{{ comment.tcCreateTime }}</span>
              </div>
              <div class="i" style="position: relative;">
                <span>{{ comment.comment }}</span>
                <el-popconfirm width="250" @confirm="delCommentData(comment.id, currentTalk.talk.id)"
                  confirm-button-type="danger" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
                  icon-color="red" title="您确定要删除该用户的评论?">
                  <template #reference>
                    <i v-permissionDirective class="iconfont icon-shanchu"
                      style="position: absolute;top: 0%;left: 90%;"></i>
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
// 头像和文字的样式
.tx-wz {
  margin-left: 10px;
  margin-top: 13px;
  width: 300px;
  height: 70px;
  display: flex;
  padding-bottom: 0;

  .box {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    display: flex;

    .bg {
      border-radius: 5px;
      width: 50px;
      height: 50px;
      object-fit: cover;
    }
  }

  .hp {
    margin-top: 2px;
    margin-left: 10px;
    color: #8597b4;

    h3 {
      font-size: 15px;
      margin-top: 10px;
      font-weight: bold;
    }

    p {
      font-weight: normal;
      font-size: 12px;
    }
  }

}

// 说说内容和图片的样式
.content {
  margin-left: 10px;
  width: 660px;
  margin-top: 0;

  p {
    margin-bottom: 10px;
    margin-right: 5px;
    letter-spacing: 2px;
  }

  .tp {
    width: 650px;
    height: 214px;
    display: flex;

    .ig {
      margin-right: 5px;
      width: 210px;
      height: 210px;
      object-fit: cover;
    }
  }
}

// 点赞和评论的样式
.dp {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: end;
  width: 640px;
  height: 30px;

  span {
    color: #323232;
  }

  i {
    color: #409eff;
    margin-bottom: 2px;
    margin-left: 24px;
    font-size: 25px;
  }


}

// 点赞的样式
.box-like {
  margin-top: 3px;
  display: flex;
  width: 635px;

  .is {
    display: inline;
    margin-top: 3px;

    i {
      font-size: 22px;
      color: #aac9e4;
    }
  }

  .dzlist {
    margin-bottom: 0;
    margin-left: 9px;
    color: #7c97b4;
    display: flex;
    flex-wrap: wrap;
    width: 580px;

    .box {
      margin-top: 3px;

      img {
        margin-right: 3px;
        border-radius: 6px;
        width: 28px;
        height: 28px;
      }
    }
  }
}

// 评论的样式
.pl-box {
  width: 655px;
  margin-top: 19px;
  display: flex;
  font-size: 13px;
  flex-wrap: wrap;

  .pl {
    margin-top: 3px;
    margin-bottom: 10px;
    position: relative;

    i {
      position: absolute;
      font-size: 22px;
      color: #aac9e4;
    }
  }

  .img-box {
    margin-left: 9px;
    margin-right: 3px;

    img {
      margin-right: 3px;
      border-radius: 8px;
      width: 30px;
      height: 30px;
    }

    .icon-hover:hover {
      cursor: pointer;
    }
  }


  .box {
    margin-bottom: 10px;

    .zk:hover {
      cursor: pointer;
    }

    display: flex;

    .my {
      width: 520px;

      .nt {
        margin-bottom: 3px;
        display: flex;
        justify-content: space-between;
        align-items: start;

        span {
          color: #8597b4;
        }
      }



      span {
        font-size: 10px;
        color: black;
      }

      i:hover {
        cursor: pointer;
        color: red;
      }
    }

  }

  .box:nth-child(n+1) {
    margin-left: 55px;
  }
}

.label {
  width: 1325px;
  background-color: #fff;
  border: none;
  height: 675px;
  border-radius: 6px;



  .card {
    display: flex;

  }

  // 卡片盒子的样式
  .card-box {

    // 每一行的盒子样式
    .box {
      width: 1278px;
      height: 460px;
      border-radius: 5px;
      display: flex;
      flex-wrap: wrap;

      // 里面的小卡片
      .card-min {
        width: 307px;
        height: 450px;
        object-fit: cover;
        transition: all 0.3s ease;
        border-radius: 5px;
        /* 每个图片占33.33%宽度，减去间隙，可以根据需要调整 */
        margin: 5px;

        ::v-deep(.el-card__header) {
          height: 48px;
        }

        ::v-deep(.el-card__body) {
          padding: 5px;
        }

        // 下拉菜单的样式
        .dropdown {
          margin-right: 0;

          // 操作按钮的样式
          .el-dropdown-link {
            color: #40b5ff;
          }
        }

        // 文字的样式
        .text-box {
          margin-left: 20px;
          width: 250px;
          height: 22px;
        }

        // 图片盒子的样式最多固定了三张
        .image-box {
          margin-top: 4px;
          display: flex;
          flex-direction: column;
          margin-left: 38px;
          width: 260px;
          height: 368px;

          .talk {
            margin-bottom: 2px;
            width: 190px;
            height: 121px;
            border-radius: 5px;

            .talk-url {
              width: 190px;
              height: 121px;
              object-fit: cover;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }
}
</style>